'use client'
import React, { useContext} from 'react'
import BlogContext from '@/context/blogContext'

function BlogHeader() {
  const {blogs, handleChangeBlog, slug} = useContext(BlogContext);
  return (
    <div className='sticky top-14 md:top-16 bg-white z-1 border-b-1 border-gray-300 py-2'>
      <div className='flex justify-center items-center gap-1'>
        {
          blogs?.length > 0 && blogs?.map(blog => (
            <div key={blog.slug}>
              {blog.status === 0 && <div onClick={() => handleChangeBlog(blog)} className={`text-sm font-medium cursor-pointer px-3 py-1.5 rounded-xs ${slug === blog.slug ? 'bg-[var(--bg-color)] font-bold! text-[#333333]' : ''}`}> <h2>{blog.title}</h2> </div>}
            </div>
          ))
        }
      </div>
    </div>
  )
}

export default BlogHeader